<template>
  <div>
    <h2 style="color: #595959; margin-bottom: 20px">
      {{ $t("messages.OrderStats") }}
    </h2>
    <span>时间查询</span>
    <el-date-picker
      style="margin-right: 10px"
      v-model="dataValue"
      type="daterange"
      range-separator="至"
      start-placeholder="2023-01-20"
      end-placeholder="2023-09-10"
      :size="size"
    />
    <el-button type="primary" @click="getTimeData">查询</el-button>
    <!-- ECharts 折线图 -->
    <div ref="lineChart" style="width: 100%; height: 500px"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getOrderReport } from "@/api/index.js";
import { format } from "date-fns"; // 日期工具库
import * as echarts from "echarts";
import { ElMessage } from "element-plus";

// 定义 ref 引用，避免直接使用 $refs
const lineChart = ref(null);
const orderTime = ref([]);
const orderAmount = ref([]);
const dataValue = ref("");

const getTimeData = () => {
  if (!dataValue.value || !dataValue.value[0] || !dataValue.value[1]) {
    ElMessage.warning("请选择时间");
    return;
  }
  dataValue.value = JSON.stringify(
    Object.values(dataValue.value).map(
      (date) => format(date, "yyyy-MM-dd HH:mm:ss") // 格式化为 "yyyy-MM-dd HH:mm:ss"
    )
  );
  console.log("1212", dataValue.value);

  getOrderReportFn(dataValue.value);
};

// 获取订单报告数据
const getOrderReportFn = async (date) => {
  orderTime.value = [];
  orderAmount.value = [];
  const res = await getOrderReport({
    date: date,
  });
  const data = res.data;
  // 格式化日期和获取数据
  orderTime.value = data.map((item) => formatDate(item.orderTime));
  orderAmount.value = data.map((item) => item.orderAmount);

  // 调用 ECharts 绘制图表
  renderLineChart(orderTime.value, orderAmount.value);
  console.log("🚀 ~ getOrderReportFn ~ res:", res);
  if (res.data.length === 0) {
    ElMessage.warning("暂无数据");
  } else {
    ElMessage.success("加载订单数据成功");
  }
};

// 日期格式处理函数
const formatDate = (dateString) => {
  return format(new Date(dateString), "yyyy-MM-dd");
};

// 渲染折线图
const renderLineChart = (orderTime, orderAmount) => {
  if (!lineChart.value) return; // 确保 DOM 元素已渲染

  const chart = echarts.init(lineChart.value); // 使用 ref 引用初始化图表
  const option = {
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      data: orderTime, // x轴数据（订单时间）
      axisLabel: {
        rotate: -35, // 设置 X 轴标签旋转角度
        interval: 0, // 使所有标签显示
      },
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: "{value}",
      },
      min: 0,
      max: 150,
      interval: 30, // y轴的显示刻度是0, 30, 60, 90, 120, 150
    },
    series: [
      {
        data: orderAmount, // y轴数据（订单金额）
        type: "line",
        lineStyle: {
          color: "#d14f44",
          width: 3,
        },
        symbol: "circle", // 设置数据点的形状
        symbolSize: 6, // 数据点的大小
      },
    ],
  };

  chart.setOption(option); // 设置图表的配置项
};

onMounted(() => {
  getOrderReportFn(`["2023-01-20 00:00:00", "2023-09-10 00:00:00"]`);
});
</script>

<style scoped>
span {
  color: rgb(67, 67, 67);
  margin-right: 10px;
}
</style>
